<script setup lang="ts">
import { reactive, ref } from "vue";
import { guild_roomApi } from "@/api/controller";
import { ToastWarning, Toastloading } from "@/utils/public";
import { getDateArray, getPlayEndTime } from '@/utils'
import xmDatePicker from '@/components/xmDatePicker/index.vue';
import Pagination from "@/components/Pagination/index.vue";
import roomuserlist from "./roomuserlist.vue";
const roomuserlistRef = ref()
const action = reactive({
  dialogFormVisible: false,
  room_id: 0,
  total: 0,
  list: [],
  timeObj:getPlayEndTime(getDateArray('ymdhis'))
});
const listQuery = reactive({
  page: 1,
  limit: 20,
})
const handleCharmValFilter = (formtype=0)=>{
  if(!formtype) return
  const { playTime, endTime } = action.timeObj
  roomuserlistRef.value.openDialog({
    room_id:action.room_id,
    value:[playTime,endTime],
    formtype
  })
}
const handleSerach = () => {
  listQuery.page = 1;
  getList();
};
const getList = async () => {
  const loading = Toastloading();
  const { playTime, endTime } = action.timeObj
  const res = await guild_roomApi.getRoomWater(action.room_id, {
    value:[playTime,endTime],
    ...listQuery
  });
  const { data = [], total = 0 } = res.data || {};
  action.list = data;
  action.total = total;
  loading.close();
};
const openDialog = async (query: any = {}) => {
  const { room_id = 0 } = query;
  if (!room_id) return ToastWarning("room_id not defing");
  action.room_id = room_id;
  await getList()
  action.dialogFormVisible = true;
}
defineExpose({
  openDialog,
});
</script>

<template>
  <div>
    <el-dialog
      top="5vh"
      class="xm-dialog"
      v-model="action.dialogFormVisible"
      destroy-on-close
      width="65%"
      title="房间流水"
    >
      <div class="labelBox">
        <xmDatePicker v-model:timeval="action.timeObj" />
        <div class="labelItem">
          <el-button type="primary" @click="handleSerach"
            >查询</el-button
          >
          <el-button type="primary" @click="handleCharmValFilter(1)"
            >魅力榜</el-button
          >
          <el-button type="primary" @click="handleCharmValFilter(2)"
            >财富榜</el-button
          >
        </div>
      </div>
      <el-table class="xm-TableCenter" :data="action.list" border height="450px">
        <el-table-column prop="room_uid" label="房间UID" />
        <el-table-column prop="name" label="房间名" />
        <el-table-column prop="created_at" label="日期" />
        <el-table-column prop="room_wealth_value" label="财富值"/>
      </el-table>
      <pagination
        v-show="action.total > 0"
        :total="action.total"
        v-model:page="listQuery.page"
        v-model:limit="listQuery.limit"
        @pagination="getList"
      />
      <roomuserlist ref="roomuserlistRef" />
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
:deep(.xm-dialog) {
  .labelBox {
    width: 100%;
  }
  .el-dialog__body {
    padding: 10px 20px 20px;
  }
}
</style>
